<template>
    <div >
        <div class="model" v-if="isModel"></div>
      <div class="modelBox" v-if="changeModel">
        <div class="modalContent">
          <p class="contentTip">请输入分类名称</p>
          <input  placeholder="请输入手机号" class="teleStyle" v-model="phoneNumber" >
        </div>
        <div class="modalFooter">
          <div class="btnCancel" @tap="tapCancel">取消</div>
          <div class="btnConfirm" @tap="confirmSend">提交</div>
        </div>
      </div>
    </div>
</template>

<script>
    export default {
        name: "modelBox",
      data(){
          return {
            changeModel: false,
            isModel: false,
            phoneNumber: '',
            id:"",
          }
      },
      onLoad(id){
        this.id=id.id
      },
      methods:{
          init(pid){
            if(!pid){
              this.pid="0";
            }else{
               this.pid=pid
            }
           
            this.tapSendTele()
          },
        // 打开输入手机号的模态框
        tapSendTele(){
          this.changeModel = !this.changeModel;
          this.isModel = !this.isModel;
        },
        confirmSend(){
          let that=this;
          console.log(this.phoneNumber)
          this.$http.request({
            method:'post',
            url:"/api/category/add",
            body:{
              simplename:that.phoneNumber,
              cardId:that.id,
              pid:this.pid
            }
          }).then((data)=>{
            if(data.code==200){
              wx.showToast({
                title: '添加成功',
                icon: 'success',
                duration: 2000,
                success:()=>{
                  that.$emit('changeDom')
                  that.tapSendTele()
                }
              })
            }else{
              wx.showToast({
                title: `${data.message}`,
                icon:"none"
              })
            }
          })
        },
        //  弹框取消
        tapCancel(){
          this.phoneNumber = '';
          this.changeModel = !this.changeModel;
          this.isModel = !this.isModel;
        },

      }
    }
</script>

<style scoped>
.model{
  position: fixed;
  top:0;
  bottom:0;
  left:0;
  right: 0;
  background: rgba(0,0,0,.5);
  z-index: 199;

}
  .modelBox{
    width: 560rpx;
    height: 300rpx;
    background: #fff;
    border-radius: 10rpx;
    z-index: 200;
    position: absolute;
    top:50%;
    left:50%;
    translate:-250rpx -150rpx;
   display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-content:space-around;
  }
.modelBox .modalFooter {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  height: 100rpx;
  border-top: 1px solid #E5E5E5;
  font-size:28rpx;
  line-height: 100rpx;
}
.teleStyle{
  width: 80%;
  margin:0 auto;
  background: #FFFFFF;
  border: 1px solid #979797;
  border-radius: 6px;
  box-sizing: border-box;
  padding-left: 12rpx;
  font-size: 28rpx;
  /*color: rgba(0,0,0,0.25);*/
  margin-top: 30rpx;
}
.modalContent{
  width: 100%;
  text-align: center;
  font-size: 28rpx;
}
.modelBox .btnCancel {
  width: 50%;
  font-size: 28rpx;
  color: #333;
  text-align: center;
  border-right: 1px solid #E5E5E5;
}
.modelBox .btnConfirm {
  font-size: 28rpx;
  width: 50%;
  color: #508CEE;
  text-align: center;
}
  .contentTip{
    text-align: center;
  }
</style>
